<template>
  <div>
    <mavon-editor
      v-model='context'
      ref='md'
      codeStyle='github'
      :ishljs='true'
      @change='change'
      @imgAdd='handleEditorImgAdd'
      @imgDel='handleEditorImgDel'
      class='my-editor'
    />
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
//引入组件的样式
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
import { delImgService, uploadImgService } from '@/api/common'

export default {
  name: 'MavonEditor',
  props: {
    markdownContent: {
      required: false,
      default: '',
      type: String
    }
  },
  // 注册组件
  components: {
    mavonEditor
  },
  data() {
    return {
      context: this.markdownContent,
      imgList: []
    }
  },
  created() {
  },
  methods: {
    // 所有操作都会被解析重新渲染
    change(value) {
      // 实时给父组件传递修改后的值
      this.$emit('getMarkDownContext', value)
    },
    handleEditorImgAdd(pos, $file) {
      uploadImgService($file).then(response => {
        // 上传成功 后端传递图片地址回来
        let url = response.data.imgUrl
        this.imgList.push(url)
        let name = $file.name
        if (name.includes('-')) {
          name = name.replace(/-/g, '')
        }
        let content = this.context
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)  这里是必须要有的
        if (content.includes(name)) {
          let oStr = `(${pos})`
          let nStr = `(${url})`
          let index = content.indexOf(oStr)
          let str = content.replace(oStr, '')
          let insertStr = (source, start, newStr) => {
            return source.slice(0, start) + newStr + source.slice(start)
          }
          this.context = insertStr(str, index, nStr)
        }
      })
    },
    
    handleEditorImgDel(pos) {
      // 文件地址
      let url = this.imgList[pos[0] - 1]
      // 文件名称
      let fileName = pos[1].name.replaceAll("-","")
      delImgService(url).then(response => {
        // 文本替换
        let repStr = `![${fileName}](${url})`
        this.context = this.context.replace(repStr,"")
        this.$message.success("删除成功")
        // 删除该元素
        this.imgList.splice(pos[0] - 1, 1);
      })
    }
  }
}
</script>

<style scoped>
.my-editor {
  margin: 5px auto;
  min-height: 530px;
  max-height: 800px;
  width: 100%;
  z-index: 0;
}

::v-deep pre {
  border-radius: 10px;
  margin-bottom: 17px;
  font-size: 18px;
  padding: 10px;
  overflow: auto;
  position: relative;
}

::v-deep pre .code-copy {
  position: absolute;
  top: 5px;
  right: 8px;
  padding: 5px 10px;
  background: #FFFFFF;
  border: 2px solid #5592E5;
  border-radius: 10px;
  font-size: 14px;
  color: #5592E5;
  cursor: pointer;
}

::v-deep pre .code-copy:hover {
  background-color: #ecf5ff;
}

::v-deep code {
  font-weight: 550;
  cursor: pointer;
  font-size: 18px;
  background-color: #e7ecf3;
}

::v-deep .markdown-body h1 {
  text-align: center;
  cursor: pointer;
}

::v-deep .markdown-body pre::before {
  content: '🔵🟢🟣';
  display: block;
  padding-bottom: 10px;
}


</style>